<script setup lang="ts" name="ChangeTemplate">
import { storeToRefs } from 'pinia'
import { useSignStoreWithOut } from '@/store/modules/sign'
const { t } = useI18n() // 国际化
const signStore = useSignStoreWithOut()
const { activeLoginTemplate } = storeToRefs(signStore)

const templateMap = ref([
  { value: '1', name: t('sign', 'template') + '1' },
  { value: '2', name: t('sign', 'template') + '2' },
  { value: '3', name: t('sign', 'template') + '3' },
  { value: '4', name: t('sign', 'template') + '4' },
])

const getTemplateName = () => {
  let res = ''
  templateMap.value.forEach((item) => {
    if (item.value === activeLoginTemplate.value) {
      res = item.name
    }
  })
  return res
}

const handleCommand = (v) => {
  if (activeLoginTemplate.value) {
    activeLoginTemplate.value = v
    signStore.setLoginTemplateCache()
  }
}
</script>

<template>
  <el-dropdown popper-class="login-template" @command="handleCommand">
    <span class="el-dropdown-link">
      <span class="text-span">{{ getTemplateName() }}</span>
      <svg-icon class="el-icon--right" icon="ep:arrow-down" />
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in templateMap" :command="item.value" :class="activeLoginTemplate === item.value ? 'is-active' : ''">
          {{ item.name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped lang="scss">
.el-dropdown-link {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;

  .text-span,
  .el-icon--right {
    color: var(--el-color-primary);
  }
}
</style>
